<template>
  <div class="container">
    <!-- 弹窗提示 -->
    <el-dialog
      :visible="showDialog"
      width="28%"
      :title="directorysType"
      @close="btnCancel"
    >
      <el-form
        :rules="rules"
        :model="formData"
        ref="roleForm"
        label-width="auto"
      >
        <el-form-item label="所属学科" prop="subjectName">
          <el-select
            v-model="formData.subjectID"
            placeholder="请选择"
            size="middle"
            style="width: 308px"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input
            v-model="formData.directoryName"
            placeholder="请输入目录名称"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-row type="flex" justify="end">
          <el-col :span="12">
            <el-button type="primary" @click="btnCancel">取消</el-button>
            <el-button @click="btnOK(id)">确定</el-button>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { detail, add, update } from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects'

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 1
    }
  },
  created () {
    this.getSimple()
    this.getDetail()
  },
  data () {
    return {
      formData: {
        directoryName: '',
        subjectID: ''
      },
      // 学科列表
      subjectList: [],
      rules: {
        subjectID: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ],
        directoryName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取目录详情
    async getDetail () {
      // 让数据同步
      await this.$nextTick()
      const res = await detail({ id: this.id })
      this.formData.directoryName = res.data.directoryName
      this.formData.subjectID = res.data.subjectID
    },
    // 获取学科简易列表
    async getSimple () {
      const res = await simple()
      // console.log(res);
      this.subjectList = res.data
      // console.log(this.subjectList);
    },
    async btnOK (id) {
      await this.$refs.roleForm.validate()
      if (id) {
        // 编辑功能
        await update({ id, ...this.formData })
        this.$emit('updateDirectorys', 0)
      } else {
        // 新增功能
        await add(this.formData)
        this.$emit('addDirectorys')
      }
      this.$emit('update:showDialog', false)
      this.$message.success('操作成功')
    },
    btnCancel () {
      this.formData = {
        subjectName: '',
        directoryName: '',
        subjectID: ''
      }
      this.$refs.roleForm.resetFields()
      this.$emit('update:showDialog', false)
    }
  },
  computed: {
    directorysType () {
      return this.id ? '修改学科' : '新增学科'
    }
  }
}
</script>

<style scoped lang='less'></style>
